<div>
    <span class="brand" style="font-weight:bold;">{{gatewayFlowRuleDialog.title}}</span>
    <div class="card" style="margin-top: 20px;margin-bottom: 10px;">
        <div class="panel-body">
            <div class="row">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">API 类型</label>
                        <div class="col-sm-9">
                            <div align="center" class="form-control highlight-border">
                                <input checked disabled="" ng-if="gatewayFlowRuleDialog.type == 'edit'" ng-model='currentRule.resourceMode'
                                       title="Route ID"
                                       type="radio" value="0"/><span ng-if="gatewayFlowRuleDialog.type == 'edit'">&nbsp;Route ID&nbsp;&nbsp;</span>
                                <input checked ng-click="useRouteID()" ng-if="gatewayFlowRuleDialog.type == 'add'" ng-model='currentRule.resourceMode'
                                       title="Route ID"
                                       type="radio" value="0"/><span
                                    ng-if="gatewayFlowRuleDialog.type == 'add'">&nbsp;Route ID&nbsp;&nbsp;</span>
                                <input disabled="" ng-if="gatewayFlowRuleDialog.type == 'edit'" ng-model='currentRule.resourceMode'
                                       title="API分组"
                                       type="radio" value="1"/><span ng-if="gatewayFlowRuleDialog.type == 'edit'">&nbsp;API 分组&nbsp&nbsp;</span>
                                <input ng-click="useCustormAPI()" ng-if="gatewayFlowRuleDialog.type == 'add'" ng-model='currentRule.resourceMode'
                                       title="API分组"
                                       type="radio" value="1"/><span
                                    ng-if="gatewayFlowRuleDialog.type == 'add'">&nbsp;API 分组&nbsp&nbsp;</span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">API 名称</label>
                        <div class="col-sm-9">
                            <input class="form-control"
                                   disabled=""
                                   ng-if="currentRule.resourceMode == 0 && gatewayFlowRuleDialog.type == 'edit'" ng-model='currentRule.resource' placeholder="请输入 Route ID"
                                   type="text"/>
                            <input class="form-control highlight-border"
                                   ng-if="currentRule.resourceMode == 0 && gatewayFlowRuleDialog.type == 'add'"
                                   ng-model='currentRule.resource' placeholder="请输入 Route ID"
                                   type="text"/>

                            <select class="form-control"
                                    disabled="" ng-if="currentRule.resourceMode == 1 && gatewayFlowRuleDialog.type == 'edit'"
                                    ng-init="selectedName = currentRule.resource" ng-model="currentRule.resource" ng-options="name for name in apiNames">
                            </select>
                            <select class="form-control"
                                    ng-if="currentRule.resourceMode == 1 && gatewayFlowRuleDialog.type == 'add'" ng-init="currentRule.resource"
                                    ng-model="currentRule.resource" ng-options="name for name in apiNames">
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">针对请求属性</label>
                        <div class="col-sm-2">
                            <label class="checkbox-inline">
                                <input checked ng-click="notUseParamItem()" ng-if="currentRule.paramItem != null"
                                       type="checkbox"/>
                                <input ng-click="useParamItem()" ng-if="currentRule.paramItem == null" type="checkbox"/>
                            </label>
                        </div>
                    </div>

                    <div class="form-group" ng-if="currentRule.paramItem != null">
                        <label class="col-sm-2 control-label">参数属性</label>
                        <div class="col-sm-9">
                            <div align="center" class="form-control highlight-border">
                                <input checked name="parseStrategy" ng-model='currentRule.paramItem.parseStrategy' title="Client IP"
                                       type="radio" value="0"/>&nbsp;Client IP&nbsp;&nbsp;
                                <input name="parseStrategy" ng-model='currentRule.paramItem.parseStrategy' title="Remote Host"
                                       type="radio" value="1"/>&nbsp;Remote
                                Host&nbsp;&nbsp;
                                <input name="parseStrategy" ng-model='currentRule.paramItem.parseStrategy' title="Header"
                                       type="radio" value="2"/>&nbsp;Header&nbsp;&nbsp;
                                <input name="parseStrategy" ng-model='currentRule.paramItem.parseStrategy' title="URL 参数"
                                       type="radio" value="3"/>&nbsp;URL 参数&nbsp;&nbsp;
                                <input name="parseStrategy" ng-model='currentRule.paramItem.parseStrategy' title="Cookie"
                                       type="radio" value="4"/>&nbsp;Cookie&nbsp;&nbsp;
                            </div>
                        </div>
                    </div>

                    <div class="form-group"
                         ng-if="currentRule.paramItem != null && (currentRule.paramItem.parseStrategy == 2 || currentRule.paramItem.parseStrategy == 3 || currentRule.paramItem.parseStrategy == 4)">
                        <label class="col-sm-2 control-label">
                            <span ng-if="currentRule.paramItem.parseStrategy==2">Header 名称</span>
                            <span ng-if="currentRule.paramItem.parseStrategy==3">URL 参数名称</span>
                            <span ng-if="currentRule.paramItem.parseStrategy==4">Cookie 名称</span>
                        </label>
                        <div class="col-sm-9">
                            <input class="form-control highlight-border" name="fieldName" ng-model='currentRule.paramItem.fieldName'
                                   placeholder="请输入" type="text"/>
                        </div>
                    </div>

                    <div class="form-group" ng-if="currentRule.paramItem != null">
                        <label class="col-sm-2 control-label">属性值匹配</label>
                        <div class="col-sm-2">
                            <label class="checkbox-inline">
                                <input checked ng-click="notUseParamItemVal()" ng-if="currentRule.paramItem.pattern != null"
                                       type="checkbox"/>
                                <input ng-click="useParamItemVal()" ng-if="currentRule.paramItem.pattern == null"
                                       type="checkbox"/>
                            </label>
                        </div>
                    </div>

                    <div class="form-group" ng-if="currentRule.paramItem.pattern != null">
                        <label class="col-sm-2 control-label">匹配模式</label>
                        <div class="col-sm-4 control-label">
                            <div align="center" class="form-control highlight-border">
                                <input checked ng-model="currentRule.paramItem.matchStrategy" title="精确" type="radio"
                                       value="0"/>&nbsp;精确&nbsp;&nbsp;
                                <input ng-model="currentRule.paramItem.matchStrategy" title="子串" type="radio"
                                       value="3"/>&nbsp;子串&nbsp;&nbsp;
                                <input ng-model="currentRule.paramItem.matchStrategy" title="正则" type="radio"
                                       value="2"/>&nbsp;正则&nbsp;&nbsp;
                            </div>
                        </div>
                        <label class="col-sm-2 control-label">匹配串</label>
                        <div class="col-sm-3 control-label">
                            <input class="form-control highlight-border" ng-model="currentRule.paramItem.pattern"
                                   placeholder="匹配串" type='text'/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">阈值类型</label>
                        <div class="col-sm-9">
                            <div align="center" class="form-control highlight-border">
                                <input checked name="grade" ng-model="currentRule.grade" title="QPS" type="radio"
                                       value="1"/>&nbsp;QPS&nbsp;&nbsp;
                                <input name="grade" ng-model="currentRule.grade" title="线程数" type="radio" value="0"/>&nbsp;线程数&nbsp;&nbsp;
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div>
                            <label class="col-sm-2 control-label">
                                <span ng-if="currentRule.grade==1">QPS 阈值</span>
                                <span ng-if="currentRule.grade==0">线程数</span>
                            </label>
                            <div class="col-sm-3">
                                <input class="form-control highlight-border" min="0" ng-model='currentRule.count'
                                       placeholder="阈值" type='number'/>
                            </div>
                        </div>
                    </div>

                    <div class="form-group" ng-if="currentRule.grade==1">
                        <div>
                            <label class="col-sm-2 control-label">间隔</label>
                            <div class="col-sm-3">
                                <input class="form-control highlight-border" id="txtInterval" min="1" ng-model='currentRule.interval'
                                       placeholder="统计窗口时间长度" type='number'/>
                            </div>
                            <div class="col-sm-2">
                                <select class="form-control" ng-click="changeIntervalUnit()"
                                        ng-init="currentRule.intervalUnit"
                                        ng-model="currentRule.intervalUnit" ng-options="intervalUnit.val as intervalUnit.desc for intervalUnit in intervalUnits">
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group" ng-if="currentRule.grade==1">
                        <label class="col-sm-2 control-label">流控方式</label>
                        <div class="col-sm-9">
                            <div align="center" class="form-control highlight-border">
                                <input checked name="controlBehavior" ng-model='currentRule.controlBehavior' title="快速失败"
                                       type="radio" value="0"/>&nbsp;快速失败&nbsp;&nbsp;
                                <input name="controlBehavior" ng-model='currentRule.controlBehavior' title="匀速排队"
                                       type="radio" value="2"/>&nbsp;匀速排队&nbsp&nbsp;
                            </div>
                        </div>
                    </div>

                    <div class="form-group" ng-if="currentRule.grade==1 && currentRule.controlBehavior==0">
                        <div>
                            <label class="col-sm-2 control-label">Burst size</label>
                            <div class="col-sm-3">
                                <input class="form-control highlight-border" min="0" ng-model='currentRule.burst'
                                       placeholder="突发请求额外允许数" type='number'/>
                            </div>
                        </div>
                    </div>

                    <div class="form-group" ng-if="currentRule.grade==1 && currentRule.controlBehavior==2">
                        <div>
                            <label class="col-sm-2 control-label">超时时间</label>
                            <div class="col-sm-3">
                                <input class="form-control highlight-border" min="0" ng-model='currentRule.maxQueueingTimeoutMs'
                                       placeholder="排队等待时间(ms)" type='number'/>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="separator"></div>
            <div clss="row" style="margin-top: 20px;">
                <button class="btn btn-outline-danger"
                        ng-click="closeThisDialog()"
                        style="float:right; height: 30px;font-size: 12px;margin-left: 10px;">取消
                </button>
                <button class="btn btn-outline-success"
                        ng-click="saveRule()" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;">
                    {{gatewayFlowRuleDialog.confirmBtnText}}
                </button>
                <button class="btn btn-default" ng-click="saveRuleAndContinue()"
                        ng-if="gatewayFlowRuleDialog.saveAndContinueBtnText"
                        style="float:right; height: 30px;font-size: 12px;">{{gatewayFlowRuleDialog.saveAndContinueBtnText}}
                </button>
            </div>
        </div>
    </div>
</div>
